<template>
	<div style="z-index:1000">
		<div v-transfer-dom>
			<popup v-model="isPopupShow" position="right" @on-hide="handleHide">
				<div class="popupDiv" style="width: 7.5rem;z-index:1000;position: relative">
					<div class="main" ref='remove'>
						<div class="univSearchWrap">
							<div class="univSearBox">
								<div class="header">
									<span @click="goback">
										<i class="imgIcon backimgs"></i>
									</span>
								</div>
								<div class="searchLine flex-h">
									<span class="imgIcon"></span>
									<div class="flex1">
										<search :auto-fixed='false' @result-click="resultClick" :results="results" v-model="value" position="absolute"
										 auto-scroll-to-top top="0.88rem" @on-submit="onSubmit" :placeholder="placeholderText" ref="search"></search>
									</div>
									<div class="clears" @click="clears"></div>
								</div>
							</div>
							<scroller ref='scrollerBottom' style="top: 1.76rem;">
								<div class="scrollerDiv" v-show="commonList.length > 0">
									<div class="describe">共{{ commonList.length }}个搜索结果</div>
									<ul class="scrollerCheckList">
										<li v-for="(item, index) in commonList" :key="index" @click="addOrRemove(item)">
											<img class="imgIcon" src="~/static/images/search_icon_sure.png" icon-class="search_icon_sure" v-if="checklist.indexOf(item) !== -1" />
											<img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
											<span :class="[checklist.indexOf(item) !== -1 ? 'selectColor': '']">
												<b style="display: block;">{{item.catalogName}}</b>
												<!-- <p>{{item.indexOf('&')>0?item.substring(0,item.indexOf('&')):item}}</p> -->
												<p>{{item.majorName}}</p>
											</span>
										</li>
									</ul>
									<div style="width: 100%;height: 92px;"></div>
								</div>
								<div style="width: 100%;height: 92px;"></div>
							</scroller>

							<div class="footer" v-show="commonList.length > 0">
								<div class="left">
									<span class="hasChoose">已选择</span>
									<span class="selectedNum">{{ checklist.length }}</span>
									<!-- 			<span class="totalNum">/{{ commonList.length }}</span> -->
									<span class="totalNum">/{{3-yixuan}}</span>
								</div>
								<div class="right" @click="submit">添加到意向专业</div>
							</div>
						</div>

					</div>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import {
		TransferDom,
		Popup,
		Search
	} from 'vux'
import { getAcademy, getMajor, getCascadeArealabel } from "~/api/volunteer";
	import ls from 'store2';
	export default {
		props: {
			popupShow: Boolean,
			placeholderText: String,
			status: String,
			yixuan: Number
		},
		directives: {
			TransferDom
		},
		components: {
			Popup,
			Search,
			// univBox,
		},
		data() {
			return {
				isPopupShow: false,
				searchs: '',
				results: [],
				value: '',
				commonList: [],
				checklist: [],
			};
		},
		watch: {
			// 根据传入的popupShow这个值来判断popup是否显示
			popupShow(type) {
				this.isPopupShow = type;
			},
			searchs(e) {
			}
		},
		mounted() {
		},
		methods: {
			getCollegeData(collname) {
				getAcademy(collname).then(res => {
					if (res.code === '0') {
						if (res.data.length > 0) {
							let ary = [];
							res.data.forEach(item => {
								ary.push(item.academyName + '&' + item.academyCode)
							})
							this.commonList = ary
						} else {
							this.commonList = []
							this.$vux.toast.text('无对应院校，请重新搜索');
						}
					}
				}).catch(() => {
					this.$vux.toast.text('网络错误，请稍后再试！');
				})
			},
			getMajorData(major) {
				this.checklist=[]
				getMajor(major).then(res => {
					if (res.code === '0') {
						if (res.data.length > 0) {
							let ary = [];
							res.data.forEach(item => {
								ary.push(item.majorName + '&' + item.majorCode)
							})
							this.commonList = res.data
						} else {
							this.commonList = []
							this.$vux.toast.text('无对应专业，请重新搜索');
						}
					}
				}).catch(() => {
					this.$vux.toast.text('网络错误，请稍后再试！');
				})
			},
			getCascadeArea(address) {
				
				getCascadeArealabel(address).then(res => {
					if (res.code === '0') {
						if (res.data.length > 0) {
							let ary = [];
							res.data.forEach(item => {
								ary.push(item.label)
							})
							this.commonList = ary
						} else {
							this.commonList = []
							this.$vux.toast.text('无对应区域，请重新搜索');
						}
					}
				}).catch(() => {
					this.$vux.toast.text('网络错误，请稍后再试！');
				})
			},
			handleHide() {
				this.$emit('closePopUp');
			},
			goback() {

				this.$emit('closePopUp');
			},
			onSubmit() {
				this.checklist = []
	
				let stat = this.status * 1

				this.$refs.search.setBlur()
				switch (stat) {
					case 1:
						this.getMajorData(this.value)
						break;
					case 2:
						this.getCollegeData(this.value)
						break;
					case 3:
						this.getCascadeArea(this.value)
						break;
					case 4:
						this.getCollegeData(this.value)
						break;
					default:
						this.getMajorData(this.value)
						break;
				}
			},

			resultClick(item) {
			},
			clears() {
				this.value = '';
			},
			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			addOrRemove(item) {
				if (this.checklist.indexOf(item) == -1) {
					if (this.checklist.length > (2 - this.yixuan)) {
						return false;
					}
					this.checklist.push(item);
				} else {
					this.checklist = this.checklist.filter((x) => {
						return x !== item;
					})
				}
			},
			submit() {
				this.$emit('sendList', this.checklist);
				setTimeout(() => {
					this.value = ''
					this.commonList = []
				}, 20)
			}
		}

	}
</script>

<style lang="less" scoped>
	.vux-popup-dialog {
		background: #fff;
	}

	.univSearchWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		position: relative;

		.univSearBox {
			width: 7.5rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: auto;

			.header {
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.3rem;

				.imgIcon {
					width: 0.4rem;
					height: 0.4rem;

				}
				.backimgs{
				display: inline-block;
      			background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
				background-size:3rem 2.4rem; 
				}
			}

			.searchLine {
				width: 100%;
				height: 0.88rem;
				padding-right: 0.3rem;
				box-sizing: border-box;
				border-bottom: 1px solid rgba(238, 238, 238, 1);
				padding-left: 0.08rem;
				padding-bottom: 0.05rem;
				overflow: hidden;

				.clears {
					width: 0.6rem;
					height: 0.88rem;
					line-height: 0.88rem;

					// align-items: center;
					// overflow: hidden;
				}


				.imgIcon {
					display: inline-block;
					width: 0.4rem;
					height: 0.4rem;
					margin-top: 0.24rem;
					background: url('~/static/sprite/other_sprites.png') 0.42rem -0.6rem;
    			background-size: 4.68rem 4.08rem;
					
				}

			}

			.searchLine /deep/ .weui-search-bar {
				background-color: none;
				padding: 0;
			}

			.searchLine /deep/ .weui-search-bar:before {
				border: none;
				height: 0;
			}

			.searchLine /deep/ .weui-search-bar:after {
				border: none;
				height: 0;
			}

			.searchLine /deep/ .weui-search-bar__box {
				padding-left: 0.2rem;
				height: 0.88rem;
				// background: red;
			}

			/deep/ .weui-search-bar__box .weui-search-bar__input {
				background: #fff !important;
			}

			/deep/.weui-search-bar__form {
				background: #fff !important;
			}

			.searchLine /deep/ .weui-search-bar__form:after {
				border: none;
				border-radius: 0;
			}

			.searchLine /deep/ .weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
				display: none !important;
			}

			.searchLine /deep/ .weui-search-bar__box .weui-icon-clear {
				display: none !important;
			}

			.searchLine /deep/ .weui-icon-search:before,
			.searchLine /deep/ .weui-search-bar__label {
				display: none !important;
			}

			.searchLine /deep/ .weui-search-bar__label span {
				display: none;
			}

			.searchLine /deep/ .weui-search-bar__box .weui-search-bar__input {
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.34rem;
				position: absolute;
			}



		}

		.scrollerDiv {
			padding: 0.3rem;
			box-sizing: border-box;

			.describe {
				font-size: 0.26rem;
				color: #BBB;
				font-weight: bold;
				// margin-top: 0.6rem;
				margin-bottom: 0.2rem;
			}

			.scrollerCheckList /deep/ .weui-cells:before {
				border: none;
				left: 0;
			}

			.scrollerCheckList {
				list-style: none;
				padding-left: 0;

				li {
					display: flex;
					align-items: center;
					width: 100%;
					height: auto;
					// line-height: 0.9rem;
					border-bottom: 1px solid #eee;
					padding-left: 0.3rem;

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
					}

					span {

						margin-left: 0.28rem;


						padding: 0.2rem;
						box-sizing: border-box;

						b {
							font-size: 0.3rem;
							font-weight: 500;
							letter-spacing: 0.03rem;
							// font-weight:bold;
							color: rgba(34, 34, 34, 1);
							line-height: 0.42rem;
						}

						p {
							font-size: 0.26rem;

							// font-weight:bold;
							color: rgba(187, 187, 187, 1);
							line-height: 0.36rem;
						}
					}

					span.selectColor {

						// 
						b,
						p {
							color: @mainColor;
							font-weight: bold;
						}
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 1.2rem;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
			color: #ccc;
			padding: 0 0.3rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.hasChoose {
					color: #222;
					font-size: 0.26rem;
					font-weight: bold;
					margin-right: 0.2rem;
				}

				.selectedNum {
					color: @mainColor;
					font-size: 0.4rem;
					margin-right: 0.07rem;
				}

				.totalNum {
					color: #BBB;
					font-size: 0.22rem;
				}
			}

			.right {
				display: inline-block;
				// width: 2rem;
				padding: 0 0.3rem;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				border-radius: 0.1rem;
				background: @mainColor;
				color: #fff;
				font-size: 0.30rem;
			}
		}

	}
</style>
